<script setup lang="ts">
import {useRouter} from "vue-router";
import TeamCardList from "@/components/TeamCardList.vue";
import {onMounted, reactive, ref, toRefs} from "vue";
import {listTeam} from "@/api/TeamApi";
import {closeToast, showFailToast, showLoadingToast, showNotify} from "vant";

const router = useRouter();
const showPopup = () => {
  state.show = true;
};
const state = reactive({
  teamList: [],
  currentUserIsCreateTeam: false,
  show: false
})

const {teamList, currentUserIsCreateTeam, show} = toRefs(state)
const offset = ref({x: 300, y: 500});
// 跳转到加入队伍页
const doJoinTeam = () => {
  router.push({
    path: "/team/add",
  })
  state.show = false;
}

const loading = ref(false);
const onRefresh = async () => {
  await getTeamList();
  showNotify({type: 'success', message: '刷新成功', duration: 500,});
  loading.value = false;
};

const getTeamList = async () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  });
  try {
    const res = await listTeam();
    if (res.data.code === 0) {
      console.log(res.data.data)
      state.teamList = res.data.data.teamUserVOList;
      state.currentUserIsCreateTeam = res.data.data.currentUserIsCreateTeam;
    } else {
      showFailToast(res.data.description || '加载失败')
    }
    // @ts-ignore
  } catch (error) {
    closeToast()
    console.error('异常：', error);
  } finally {
    closeToast();
  }
}

const searchTeamInfo = async () => {
  /*router.push({
    path: "/team/search",
  })
  state.show = false;*/
  showFailToast("正在开发中...")

}

onMounted(async () => {
  await getTeamList();

})

</script>

<template>
  <div>
    <van-notice-bar
        v-if="currentUserIsCreateTeam"
        left-icon="volume-o"
        text="尊敬的用户您好，系统检测到您暂未创建队伍，点击气泡前往创建吧!"
    />
  </div>
  <div id="team">
    <div>
      <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <template v-if="teamList.length > 0">
          <team-card-list :team-list="teamList"></team-card-list>
        </template>
        <template v-else>
          <!-- 空状态提示：支持"暂无数据"和"加载失败"两种场景 -->
          <van-empty
              description="暂无队伍数据，点击'气泡'创建第一个队伍吧～"
          >
          </van-empty>
        </template>
      </van-pull-refresh>
    </div>

    <div>
      <van-floating-bubble
          axis="xy"
          icon="ellipsis"
          magnetic="x"
          v-model:offset="offset"
          @click.stop="showPopup"
      />
      <van-popup
          v-model:show="show"
          round
          position="bottom"
          :style="{ height: '30%' }"
          @click.stop
      >
        <div class="popup-box">
          <van-space direction="vertical" fill>
            <van-button type="primary" @click="doJoinTeam" block>创 建 自 己 的 队 伍</van-button>
            <van-button type="primary" @click="searchTeamInfo" block>检 索 相 关 的 队 伍</van-button>
          </van-space>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<style scoped>
#team {
  min-height: 100vh;
  padding: 10px;
  box-sizing: border-box;
}

.floating-bubble {
  z-index: 100;
}

.popup-box {
  width: 90%;
  margin-top: 15%;
  margin-left: auto;
  margin-right: auto;
}

#team:deep(.van-popup) {
  text-align: center;
}

</style>
